{% extends 'layout.html' %}
{% block title%}{{title}}{% endblock %}
{% block content %}
<div class="app-content-body fade-in-up">
    <div>
        <div class="hbox hbox-auto-xs hbox-auto-sm">
            <div class="col">
                <div style="background:url({{user.cover}}) center center; background-size:cover">
                    <div class="wrapper-lg bg-white-opacity" style="position: relative;">
                        <div class="row m-t">
                            <div class="col-sm-7">
                                <a href="/user/{{user.nickname}}" class="thumb-lg pull-left m-r">
                                    <img src="{{user.avatar}}" class="img-circle">
                                </a>

                                <div class="clear m-b">
                                    <div class="m-b m-t-sm">
                                        <span class="h3 text-black">{{user.nickname}}</span>
                                        <small class="m-l">{{user.location}}</small>
                                        <small class="m-l">{{user.company}}</small>
                                    </div>
                                    <p class="m-b">
                                        <a href="{{user.github}}" class="btn btn-sm btn-bg btn-rounded btn-default btn-icon">
                                            <i class="fa fa-github"></i></a>
                                        <a href="{{user.weibo}}" class="btn btn-sm btn-bg btn-rounded btn-default btn-icon"><i
                                                class="fa fa-weibo"></i></a>
                                    </p>
                                    <a class="btn btn-sm btn-success btn-rounded disabled">已关注</a>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="pull-right pull-none-xs text-center">
                                    <a href="" class="m-b-md inline m">
                                        <span class="h3 block font-bold">{{user.watchyou.length}}</span>
                                        <small>粉丝</small>
                                    </a>
                                    <a href="" class="m-b-md inline m">
                                        <span class="h3 block font-bold">{{user.youwatch.length}}</span>
                                        <small>关注</small>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="set-cover">
                            <input type="file" id="cover" class="no-show"/>
                            <i title="点击上传封面" class="not-icon fa fa-gear" onclick="document.querySelector('#cover').click();"></i>
                        </div>
                    </div>
                </div>



                <div class="wrapper bg-white b-b">
                    <ul id="profile-tab" class="nav nav-pills nav-sm">
                        <li class="active"><a href="javascript:;">动态</a></li>
                        <li><a href="javascript:;">个人信息</a></li>
                        <li><a href="javascript:;">粉丝</a></li>
                        <li><a href="javascript:;">关注</a></li>
                        <li><a href="/security">密码修改</a></li>
                        <li><a href="/settings">网站设置</a></li>
                    </ul>
                </div>



                <div id="user-action" class="profile-sh show padder">

                    <div v-cloak class="streamline b-l b-info m-l-lg m-b padder-v">

                        <div v-if="!extra.status" class="wrapper text-center" v-text="extra.msg"></div>
                            <div class="m-b-lg" v-repeat="ac:useraction">
                                <a href="/user/(%ac.name%)" class="pull-left thumb-sm avatar m-l-n-md">
                                    <img v-attr="src:ac.avatar" alt="...">
                                </a>
                                <div class="m-l-lg bg-white">
                                    <div class="panel-heading pos-rlt b-b b-light">
                                        <span class="arrow left outline"></span>
                                        <a class="text-info" href="/user/(%ac.name%)" v-text="ac.name"></a>

                                        <label v-if="'post'==ac.type" class="label bg-light m-l-sm m-r-sm">发布了文章</label>

                                        <label v-if="'doc'==ac.type" class="label bg-light m-l-sm m-r-sm">发布了文档</label>

                                        <label v-if="'comment'==ac.type" class="label bg-light m-l-sm m-r-sm">回复了</label>

                                        <label v-if="'reply'==ac.type" class="label bg-light m-l-sm m-r-sm">@</label>


                                        <a v-if="'post'==ac.type || 'doc'==ac.type" class="text-info" href="/(%ac.type%)/(%ac.pid%)" v-text="ac.title"></a>

                                        <a v-if="'comment'==ac.type" class="text-info" href="/(%ac.articleType%)/(%ac.rid%)" v-text="ac.title"></a>

                                        <a v-if="'reply'==ac.type" class="text-info" href="/user/(%ac.atuser%)" v-text="ac.atuser"></a>

                                      <span class="text-muted m-l-sm pull-right" v-text="ac.createtime"></span>
                                    </div>
                                </div>
                        </div>

                    </div>

                    <div class="loader wrapper text-center"><img src="/img/flickr.svg"/></div>
                    <div v-cloak v-if="page.page*10<page.total" class="clearfix text-center">
                        <a href="javascript:;" class="auto" v-on="click:eachdata()">
                            <i class="fa fa-angle-double-down"></i>
                            <span>更多主题</span>
                        </a>
                    </div>

                </div>
                <script>
                    var profileSex = '{{user.sex}}' || 'man';
                </script>


                <div class="profile-sh margin5">
                    <div class="panel">
                        <div class="panel-body" style="padding: 50px;">

                            <form id="profile-form" class="form-horizontal">

                                <!--邮箱-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">邮箱</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control color999" value="{{user.email}}" disabled>
                                    </div>
                                </div>

                                <div class="line line-dashed b-b line-lg "></div>

                                <!--花名-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">用户名</label>

                                    <div class="col-sm-10">
                                        <input name="nickname" v-model="profile.nickname" type="text" class="form-control" value="{{user.nickname}}">
                                    </div>

                                </div>

                                <div class="line line-dashed b-b line-lg "></div>
                                <!--性别-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">性别</label>

                                    <div class="col-sm-10">
                                        <div class="radio">
                                            <label class="i-checks">
                                                <input type="radio" name="sex" value="man" v-model="profile.sex" />
                                                <i></i>
                                                男
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label class="i-checks">
                                                <input type="radio" name="sex" value="woman" v-model="profile.sex" />
                                                <i></i>
                                                女
                                            </label>
                                        </div>
                                    </div>

                                </div>

                                <div class="line line-dashed b-b line-lg "></div>

                                <!--用户组-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">用户组</label>

                                    <div class="col-sm-10">
                                        <input id="show-role" type="text" class="form-control color999" value="{% if 1 == user.role%}会员{% elseif 2==user.role %}管理员{% else %}Boss{%endif%}"disabled>
                                    </div>

                                </div>
                                <div class="line line-dashed b-b line-lg "></div>

                                <!--所在公司-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">所在公司</label>

                                    <div class="col-sm-10">
                                        <input type="text" v-model="profile.company" class="form-control" value="{{user.company}}"/>
                                    </div>
                                </div>

                                <div class="line line-dashed b-b line-lg "></div>

                                <!--地址-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">地址</label>

                                    <div class="col-sm-10">
                                        <input type="text" v-model="profile.location" class="form-control" value="{{user.location}}"/>
                                    </div>
                                </div>

                                <div class="line line-dashed b-b line-lg "></div>

                                <!--头像-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">头像</label>

                                    <div class="col-sm-10">
                                        <input type="file" id="avatar" class="no-show"/>
                                        <button type="button" class="btn btn-success btn-sm" onclick="document.getElementById('avatar').click()"><i class="fa fa-fw m-r-xs fa-plus"></i> 点击上传头像</button>
                                        <span id="show-precent"></span>
                                    </div>

                                    <div id="wrap-progress" class="no-show">
                                        <div class="line"></div>
                                        <label class="col-sm-2 control-label"></label>
                                        <div id="preview-avatar" class="col-sm-10"></div>
                                    </div>
                                </div>
                                <div class="line line-dashed b-b line-lg "></div>

                                <!--个人介绍-->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" style="padding-top: 15px;">个人介绍</label>

                                    <div class="col-sm-10">
                                            <textarea v-model="profile.description" style="resize:none;" class="form-control" rows="3" placeholder="个人介绍">{{user.description}}</textarea>
                                    </div>
                                </div>


                                <!--github-->
                                <div class="line line-dashed b-b line-lg "></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">github</label>

                                    <div class="col-sm-10">
                                        <input v-model="profile.github" type="text" class="form-control" value="{{user.github}}"/>
                                    </div>
                                </div>

                                <!--微博-->
                                <div class="line line-dashed b-b line-lg "></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">微博</label>

                                    <div class="col-sm-10">
                                        <input v-model="profile.weibo" type="text" class="form-control" value="{{user.weibo}}"/>
                                    </div>
                                </div>

                                <!-- end editor -->
                                <div class="line line-dashed b-b line-lg "></div>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button v-on="click:submit" class="btn btn-primary">更新信息</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!--关注我的人-->
                <div id="watch-you" class="profile-sh wrapper panel clearfix">
                    <div class="panel-heading b-b b-light">
                        <span class="badge bg-warning pull-right">{{user.watchyou.length}}</span>
                        <a href="javascript:;" class="font-bold">粉丝</a>
                    </div>
                    <div class="watchyouloader wrapper text-center"><img src="/img/flickr.svg"/></div>
                    <div v-if="!extra.status" class="wrapper text-center" v-text="extra.msg"></div>

                    <ul class="list-group no-borders">
                        <li v-repeat="watchyouuser:watchyouusers" class="list-group-item col-sm-3">

                            <a href="/user/(%watchyouuser.nickname%)" class="pull-left thumb-sm m-r">
                                <img v-attr="src:watchyouuser.avatar" class="r">
                            </a>
                            <div class="clear">
                                <div><a href="/user/(%watchyouuser.nickname%)">(%watchyouuser.nickname%)</a></div>
                                <small class="text-muted">
                                    <a href="javascript:;" v-on="click:watch($event, watchyouuser._id)" class="btn btn-primary btn-xs (%!!watchyouuser.iswatch && 'disabled'%)"><i class="fa fa-plus"></i>&nbsp;&nbsp;(%!!watchyouuser.iswatch?'已关注':'关注'%)</a>
                                </small>
                            </div>

                        </li>
                    </ul>
                 </div>


                <!--我关注的人-->
                <div id="you-watch" class="profile-sh wrapper panel clearfix">
                    <div class="panel-heading b-b b-light">
                        <span class="badge bg-warning pull-right">{{user.youwatch.length}}</span>
                        <a href="/javascript:;" class="font-bold">关注</a>
                    </div>

                    <div v-if="!extray.status" class="wrapper text-center" v-text="extray.msg"></div>

                    <ul class="list-group no-borders">
                        <li v-repeat="watchyouuser:watchyouusers" class="list-group-item col-sm-3">

                            <a href="/user/(%watchyouuser.nickname%)" class="pull-left thumb-sm m-r">
                                <img v-attr="src:watchyouuser.avatar" class="r">
                            </a>
                            <div class="clear">
                                <div><a href="/user/(%watchyouuser.nickname%)">(%watchyouuser.nickname%)</a></div>
                                <small class="text-muted">

                                    <a href="javascript:;" v-on="click:watch($event, watchyouuser._id)" class="btn btn-primary btn-xs"><i class="fa fa-minus"></i>&nbsp;&nbsp;取消关注</a>

                                </small>
                            </div>

                        </li>
                    </ul>


                </div>





            </div>







            <div class="col w-lg bg-light lter b-l bg-auto">
                <div class="wrapper">
                    <div class="">
                        <h4 class="m-t-xs m-b-xs">新增粉丝</h4>
                        <ul class="list-group no-bg no-borders ">
                            <ul class="list-group no-bg no-borders ">
                                {% for like in likes %}
                                <li class="list-group-item">
                                    <a href="/user/{{like.nickname}}" class="pull-left thumb-sm avatar m-r">
                                        <img src="{{like.avatar}}" class="img-circle">
                                    </a>

                                    <div class="clear">
                                        <div><a href="/user/{{like.nickname}}">{{like.nickname}}</a></div>
                                        <small class="text-muted">关注</small>
                                    </div>
                                </li>
                                {% endfor %}
                                {% if !likes.length%}
                                <small class="text-muted">暂无粉丝</small>
                                {%endif%}
                            </ul>
                        </ul>
                    </div>
                    <!--<div class="panel b-a">-->
                        <!--<h4 class="font-thin padder">Latest Tweets</h4>-->
                        <!--<ul class="list-group">-->
                            <!--<li class="list-group-item">-->
                                <!--<p>Wellcome <a href="" class="text-info">@Drew Wllon</a> and play this web-->
                                    <!--application template, have fun1 </p>-->
                                <!--<small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 2 minuts ago-->
                                <!--</small>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</div>-->
                    <!--<div class="panel b-light clearfix">-->
                        <!--<div class="panel-body">-->
                            <!--<a href="" class="thumb pull-left m-r">-->
                                <!--<img src="./assets/a0.jpg" class="img-circle">-->
                            <!--</a>-->

                            <!--<div class="clear">-->
                                <!--<a href="" class="text-info">@Mike Mcalidek <i class="fa fa-twitter"></i></a>-->
                                <!--<small class="block text-muted">2,415 followers / 225 tweets</small>-->
                                <!--<a href="" class="btn btn-xs btn-success m-t-xs">Follow</a>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock%}
{% block loadjs %}
<script>
    require(['profile/index.min','profile/useraction.min']);
</script>
{% endblock %}
